<template>
    <div class="wrap">
      
    <div class="clearfix" :class="{ 'top-header': isFixed !== undefined }" ref="topHeader">
      <slot></slot>
    </div>
    <!-- 空的占位 -->
    <div ref="empty" class="empty"></div>
  </div>
</template>

<script>
export default {
  name: 'topHeader',
  props: ['isFixed'],
  methods: {
    // 设置空标签进行占位
    setEmpty(){
      if(this.isFixed !== undefined){
        // 获取当前元素的高度进行设置占位
        // console.log(this.$refs.topHeader.offsetHeight)
        // 设置空占位符
        this.$refs.empty.style.height = this.$refs.topHeader.offsetHeight + 1 + 'px'
      }
    }
  },
  mounted(){
    this.setEmpty()
  }
}
</script>

<style lang="less" scoped>
// 头部样式， 做成插槽，进行定位粘连
.top-header{
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999;
}
</style>